<template>
	<div id="register" class="register">
		<div class="demoImg">
			<img slot="icon" class="logo" src="../assets/logo.jpg">
		</div>
		<div style="text-align: center;">
			<span style="color: rgb(255, 142, 10);">多招(SmartCRM)，提供快速、完整的教育行业解决方案，让您能够以客户为中心开展一切工作</span>
		</div>
		<group>
			<x-input required title="手机" name="phone" mask="99999999999" :max="11" is-type="china-mobile" v-model="phone"></x-input>
			<x-input required title="密码" name="password" type="password" v-model="password"></x-input>
			<x-input required title="姓名" name="name" is-type="china-name" v-model="username"></x-input>
			<x-input required title="公司" name="referrer" v-model="company"></x-input>
			<x-input title="验证码" type="text" placeholder="请输入验证码" v-model="code" required>
				<x-button slot="right" :gradients="['#1D62F0', '#19D5FD']" mini :disabled="getCode.disabled" @click.native="handleGetCode">{{getCode.txt}}</x-button>
			</x-input>
		</group>
		<div class="error" v-show="error">{{error}}</div>
		<flexbox style="margin-top: 40px">
			<flexbox-item>
				<x-button :gradients="['#FF5E3A', '#FF9500']" @click.native="register">开始试用</x-button>
			</flexbox-item>
			<flexbox-item>
				<x-button :gradients="['#1D62F0', '#19D5FD']" @click.native="login">用户登录</x-button>
			</flexbox-item>
		</flexbox>
		<div v-transfer-dom>
			<alert v-model="show" title="恭喜注册成功！" @on-show="onShow" @on-hide="onHide"> 点击确定快去登录体验吧 </alert>
		</div>
	</div>
</template>

<script>
	import NetWorking from '@/utils/networking'
	import {Group, XInput, XButton, Cell, Datetime, PopupPicker, XImg, Flexbox, FlexboxItem, Alert, TransferDom } from 'vux'
	export default {
		name: "register",
		components:{
			XImg,
			Group,
			XInput,
			XButton,
			Cell,
			Datetime,
			PopupPicker,
			Flexbox,
			FlexboxItem,
			Alert,
			TransferDom
		},
		directives: {
			TransferDom
		},
		data() {
			return {
				getCode: {
					txt: '获取',
					disabled: false,
				},
				code: '', //验证码
				hashcode:'',
				show: false,
				username: '',
				password: '',
				phone: '',
				company: '',
				error: '',
				show: false
			}
		},
		methods: {
			onShow() {

			},
			onHide() {
				this.$router.push('/')
			},
			handleGetCode() {
				if(this.phone) {
					this.getCode.disabled = true;
					this.getCode.txt = '获取中...';
					let seconds = 60;
					let self = this;
					let time = setInterval(function() {
						--seconds;
						self.getCode.txt = seconds + 's';
						if(seconds <= 0) {
							clearInterval(time);
							self.getCode.disabled = false;
							self.getCode.txt = '获取验证码';
						}
					}, 1000)

					NetWorking.doGet('auth/verifycode',
						null,
						{
							params: {
								phoneNumber: this.phone
							},
						}
						)
						.then(
							response =>
							{
								let res = response.data

								if (res.error_code == 0)
								{
									this.hashcode = res.hashcode
								}
								else
								{
									this.error = res.error_message
								}

							},
							(message) => {
								window.alert(message)
								this.hideLoading()
							}
						)
				} else {
					this.error = "请确认手机填入正确"
				}
			},
			login: function () {
				this.$router.push('/')
			},
			register: function () {

				if(this.username == '' || this.phone == '' || this.password == '' || this.company == '' || this.code == ''){
					this.error = "请确认所有必填项输入正确"
					return
				}

				let _this = this
				NetWorking.doPost(
					'auth/signup',
					null,
					{
						nickname: this.username,
						password: this.password,
						username: this.phone,
						phone: this.phone
					},
					{
						params: {
							"code": this.code,
							"hashcode": this.hashcode,
							"company": this.company
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							//this.$router.push({ name: 'thanksPage'})
							_this.show = true
							_this.$store.commit('DELETE_WXOPENID')
						}else if(rs.error_code == 20016){
							alert('该手机号已存在')
						}else if(rs.error_code == 20002){
							alert('手机号或验证码不正确，请重试')
						}else{
							alert(rs.error_message);
						}
					}
				)
			}
		}
	}
</script>

<style>
	.error{
		font-size: 15px;
		color:red;
		text-align: center;
		margin-top: 10px;
	}

	.register {
		margin-left: 5px;
		margin-right: 5px;
	}
	.buttonUser {
		border-radius: 25px;
		margin-top: 40px;
		margin-bottom: 10px;
		width: 90% !important;
	}

	.UserCell {
		height: 1.41176471em !important;
		line-height: 1.41176471 !important;
		text-decoration: none;
	}

	.weui-cell__bd {
		text-align: left;
	}

	.logo{
		width: 50%;
	}

	.ximg-demo {
		width: 60%;
		height: auto;
		margin-top: 0px;
	}

	.demoImg {
		text-align: center;
	}
</style>
